<template>
	<view>
		<head-box></head-box>
		<view  class="top_banner">
			<view class="topbanner">
				<image src="../../static/img/nhwy_banner.png" mode="scaleToFill"></image>
			</view>
		</view>

		<view class="header-search">
			<view class="index-top-header-search">
				<image class="search-icon " src="/static/img/search-icon.png" mode="" @click="searchWord"></image>
				<input class="search-input"  type="text" v-model="searchValue" placeholder="请输入搜索内容" @input="changevalue" @confirm="searchWord" confirm-type="search"/>
				<image class="search-icon-r " style="display: none;" src="/static/img/yy_ico.png" mode="" ></image>
		</view>
		</view>
		<view class="search_box_mian tab-botton">
			<view class="search_box_bj"></view>
			<view class="search_box" v-if="this.isSearch==1">
				<view class="search_box_bt">大家都在搜</view>
				<view class="search_box_list">
					<view class="search_item" v-for="(val,i) in this.hotSearchList" @click="clickSearchWord(val)">{{val.word}}</view>
				</view>
				<view class="search_box_bt">历史搜索<image class="delete_ls" src="/static/img/delete.png" mode="" @click="clean()"></image></view>
				<view class="search_box_list">
					<view class="search_item" v-for="(val,i) in this.historyWords" @click="clickSearchWord(val)">{{val.word}}</view>
				</view>
				<view class="search_box_bt">帮扶热线</view>
				<view class="search_box_list">
					<view class="search_item" v-for="(val,i) in this.rxdh" @click="makePhoneCall(val.phone)">{{val.name}} {{val.phone}}</view>
				</view>
			</view>
			<view class="search_box_value" v-if="this.isSearch==2">
				<view class="record1">
					<view class="search_box_bt">搜索结果</view>
					<view class="record_box" >
						<view class="ul">
							<!--view class="li" @tap="handleLink('/pages/LearningRecord/LearningRecord')">
								<view class="text">1. <text class="red">学习</text>记录</view>
							</view-->
							<view class="li" v-for="(val,i) in this.searchList">
								<view class="text" @click="handleToDeatil(val)">{{val.wordRecordname}}   <text class="chakan">(点击查看)</text><!--{{i+1}}. text class="red">培训记录</text--></view>
							</view>
							<!--view class="li">
								<view class="text">3. 签到记录</view>
							</view-->
						</view>
					</view>
				</view>
			</view>

			<view class="search_box_null"  v-if="this.isSearch==3">
				<!--<img src="/static/img/meiyoujieguo.png" />-->
				<view class="text">抱歉,没有找到相关的内容</view>
				<view class="text">建议换个名称搜一搜</view>
				<view class="text">或者给我们留言,我们会尽快给您答复!</view>
				<!--<view class="text">点击<text class="red" @tap="handUrl('/pages/advice/advice?id=3')">我有话说</text>给我们一点金点子</view>-->
				<view class="message_box" @tap="handUrl('/pages/advice/advice?id=4')">
					<view>
						<textarea class="textarea" placeholder="请输入您想要对我们说的话"></textarea>
					</view>
					<view class="subbtn">
						<button type="primary"  @click="submit">提交</button>
					</view>
				</view>
			</view>
		</view>
		<tabs-box></tabs-box>
	</view>
</template>

<script>
	import { getWordList, getHotWordList,getGroupUrls } from '@/common/request.js';

	export default {
		data() {
			return {
				searchValue: '',
				searchList: [],
				hotSearchList: [],
				historyWords: [],
				isEmpty: false,
				isSearch: 1,
				rxdh:[
					{"name":"青少年帮扶热线","phone":"0571-12355"},
					{"name":"职工维权服务热线","phone":"0571-12351"},
					{"name":"职工心理关爱热线","phone":"0571-88995151"},
					{"name":"妇女儿童咨询热线","phone":"0571-85811959"},
					{"name":"商事法律服务热线","phone":"0571-85257482"}
				]
			};
		},
		onLoad(options) {
			this.getSearchWordList(); //获取最热关键字
			this.loadMySearchWord();
		},
    onShow(){
      // #ifdef H5
      console.log('分享')
      this.$wxSetShare()
      // #endif
    },
		methods: {
			GetMd(id)
			{
				var that = this
				getGroupUrls(id).then(res => {
					if(res.success)
					{
						var url = res.result[id];

						if(url == ''){
							console.log('没有配置场景地址');
							return;
						}
						console.log(url);
						if(url.indexOf('null')!=-1){
							console.log('================================' );
							url = getStr(url,"&redirectUrl=","&timestamp");
							console.log('取参后' + url);
						}
						console.log(url.indexOf('http'));
						if(url.indexOf('http') !=-1)
						{
							url = '/pages/webview/webview?url=' + encodeURIComponent( url);;
						}
						console.log(url);
						//return;
						//handleLink('/pages/webview/webview?url=http://app15.hzgsredcross.org.cn/Home/Szqt/?mobile=13111111111&nickname=13111111111&pid=330106198502263019&redirectUrl=http://app15.hzgsredcross.org.cn/JKDetailInfo/indexNew&timestamp=1618579963262&userToken=1379693441818066946&sign=ec77509ea99f0a013366afb691c99405');
						if (!url) return false;
						uni.navigateTo({
							url:url
						})

					}

					function getStr(str, start, end) {
					    let res = str.match(new RegExp(`${start}(.*?)${end}`))
					    return res ? res[1] : null
					}
				});
			},
			handleToDeatil(item){
				if(item.wordTable == 'gp_gpinfo'){
					this.handleToQuntuanDeatil(item.wordRecordid);
				} else if(item.wordTable == 'gp_front'){
					this.handleToFrontDeatil(item.wordRecordid);
				} else if(item.wordTable == 'gp_scene'){
					this.GetMd(item.wordRecordid)
				}
			},

			handUrl(url)
			{
				uni.navigateTo({
					url:url
				})
			},

			handleToFrontDeatil(id) {
				uni.navigateTo({
					url:'/pages/positionMarket/positionMarket?id='+id
				})
			},
			handleToQuntuanDeatil(id) {
				uni.navigateTo({
					url:'/pages/quntuanDetailPage/quntuanDetailPage?id='+id
				})
			},
			clickSearchWord(item){
				this.searchValue = item.word;
				this.searchWord();
			 },
			 changevalue()
			 {
				 if(this.searchValue.length == 0)
				 {
					 this.isSearch = 1;
				 }
			 },
			loadMySearchWord(){
				this.historyWords = uni.getStorageSync('historySearchWords');
				if(!this.historyWords){
					this.historyWords = []
				}
				console.log('---',this.historyWords)
			},
			getSearchWordList(){
				let param ={"pageNo":1,"pageSize":5}
				getHotWordList(param).then(res => {
					console.log('res',res)
					if(res.success) {
						this.hotSearchList = res.result.records;
					}
				});
			},
			clean() {
				uni.removeStorage({
				 key: "historySearchWords"
				});
				this.historyWords = [];
				this.$api.msg('搜索关键字清除成功');
		    },
			makePhoneCall(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			searchWord() {
				if(this.searchValue.length <= 0){
					return this.$api.msg('搜索关键字长度不能为空');
				}
				if(this.searchValue.length > 15){
					return this.$api.msg('搜索关键字长度不能大于15位');
				}
				this.isSearch = 2;
				let param ={"word": this.searchValue,"pageNo":1,"pageSize":10}
				getWordList(param).then(res => {
				console.log('res---',res.result.length)
					if(res.success) {
						this.searchList = []
						res.result.forEach(item => {
							this.searchList.push({
								id: item.id,
								wordName: item.wordName,
								wordRecordid: item.wordRecordid,
								wordRecordname: item.wordRecordname,
								wordTable: item.wordTable,
								wordWeight: item.wordWeight
								})
						})

						if(res.result.length > 0){
							let tempList = [];
							this.searchList.forEach(item => {
								let some = tempList.some(x=>x.wordRecordname == item.wordRecordname);
								if(!some){
									tempList.push(item);
								}
							});
							this.searchList = tempList;
							this.isEmpty = false;
							let some = this.historyWords.some(x=>x.word == this.searchValue)
							if(!some){
								this.historyWords.unshift({"word": this.searchValue});
								if(this.historyWords.length > 5){
									this.historyWords = this.historyWords.slice(0, 5);
								}
								uni.setStorage({
									 key: "historySearchWords",
									 data: this.historyWords
								});
							}
						} else {
							this.isSearch = 3;
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.message_box{
		padding:0 60rpx;
		.textarea{
			border-radius: 10rpx;
			border: 1px solid #cccccc;
			padding: 20rpx;
			width: 100%;
			margin-top: 50rpx;
		}
		.subbtn{
			margin-top: 50rpx;
		}
	}
	.chakan{
		color: #888888;
		margin-left: 10rpx;
		font-size: 24rpx;
	}
	.top_banner{
		padding: 30rpx 30rpx 0 30rpx;
	}
	.topbanner{
		width: 100%;
		height: 260rpx;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.search_box_mian{

	}
	.search_box_bj{
		height: 50rpx;
		width: 100%;
		background-image: linear-gradient(#f2f8ff, #ffffff);
	}
	.red{
		color: #ff0000;
	}
	.search_box{
		padding: 30rpx;
		.search_box_bt
		{
			font-size: 34rpx;
			font-weight: bold;
			.delete_ls{
				width: 34rpx;
				height: 34rpx;
				float: right;
			}
		}
		.search_box_list{
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;
			.search_item{
				font-size: 26rpx;
				background-color: #f3f3f3;
				padding: 16rpx 30rpx;
				margin: 10rpx;
				border-radius: 34rpx;
			}
		}
	}
	.header-search
		{
		margin-top: 0rpx;
		padding: 30rpx;

		.index-top-header-search{
			width: 100%;
			height: 80rpx;
			// background-color: rgba(255,255,255,0.65);
			border-radius: 10rpx;
			box-sizing: border-box;
			border: 1px solid #eee;
			position: relative;
			.search-icon{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 0;
				left: 5rpx;
				right: 0;
				bottom: 0;
				margin: auto;
				margin-left: 12rpx;
			}
			.search-icon-r{
				width: 35rpx;
				height: 35rpx;
				position: absolute;
				top: 0;
				right: 20rpx;
				bottom: 0;
				margin: auto;
				margin-left: 12rpx;
			}
			.search-input{
				width: 100%;
				height: 100%;
				border: none;
				border-radius: 10rpx;
				display: flex;
				background-color: rgba(255,255,255,0.65);
				padding: 0 60rpx;
				font-size: 30rpx;
				box-sizing: border-box;
				background-color: #f3f3f3;
			}

		}
		.search_bq_title
		{
			font-size: 30rpx;
		}
		.search_bq_list{
			margin-bottom: 20rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			.search_bq{
				font-size: 24rpx;
				padding: 20rpx 30rpx;
				background-color: #eee;
				border-radius: 10rpx;
				margin: 5rpx;
			}
			.select_search
			{
				background-color: #bfacfb;
				color: #fff;
			}
		}
	}
	.record1{
		float:left;
		padding:30rpx 30rpx 0 30rpx;
		box-sizing:border-box;
		width:100%;
		margin-top:20rpx;
		.record1_title
		{
			border-left:8rpx solid #007AFF;
			padding-left:16rpx;
			font-size:30rpx;
			font-weight:bold;
		}
		.search_box_bt
		{
			font-size: 34rpx;
			font-weight: bold;
			}
		.record_box{
			.ul{
				background-color: #fff;
				padding: 20rpx 0;;}
			.li{
				image
					{
						width: 87rpx;
						height: 87rpx;
					}
				.text
					{
						font-size: 30rpx;
						padding: 30rpx;
						border-bottom: 1px solid #f3f3f3;
						.red{
							color: #d80404;
						}
					}
			}
		}
	}
	.search_box_null{
		width: 100%;
		img{
			width: 100%;
		}
		.text{
			text-align: center;
			font-size: 30rpx;
			color: #888888;
			line-height: 50rpx;
		}
	}
</style>
